package com.shenzhenai.dn_compose_learn

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview

/**
 *
 * 04-布局
 * https://www.bilibili.com/video/BV1ob4y1a7ad?spm_id_from=333.788.player.switch&vd_source=e07cc8cc94eb22bd76722071b03cd199&p=4
 *
 *
 */
class MainActivity03 : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MessageCard(
                Message("Android", "Jetpack Compose")
            )
        }
    }

    @Composable
    fun MessageCard(msg: Message) {
        /**
         * 1.Column 类似 LinearLayout 的垂直布局，用来进行垂直方向的布局
         *
         * 2. Row 类似 LinearLayout 的水平布局，用来进行水平方向的布局
         *
         * 3.Text 类似 TextView，用来显示文案
         *
         * 4.Image 类似 ImageView，用来展示图片
         */
        Row {
            Image(
                painter = painterResource(R.drawable.profile_picture),
                contentDescription = null,
            )
            Column {
                Text(text = msg.author)
                Text(text = msg.body)
            }
        }

    }

    @Preview
    @Composable
    fun PreviewMessageCard() {
        MessageCard(
            Message("Android", "Jetpack Compose")
        )
    }

    data class Message(
        val author: String,
        val body: String
    )
}
